<template>
  <view class="list-tab">
    <view class="item-main" v-for="(item, index) in dataList" :key="index">
      <view class="item-list-box" v-if="item.odStatus == tabsIndex || tabsIndex == 0">
        <view class="item-top">
          <view>
            <text>订单编号：</text>
            <text>{{ item.odNumber }}</text>
          </view>
          <view class="pay-type" :class="getStatusClass(item.odStatus)">
            <text>{{ swiperTabList[item.odStatus].name }}</text>
          </view>
        </view>

        <view class="line"></view>
        <view class="item-content">
          <view class="item-left">
            <image
              :src="item.picUrl"
              :fade="true"
              radius="5"
              width="70"
              height="70"
              duration="450"
            ></image>
          </view>
          <view class="item-right" @tap="goOrderDetail(item)">
            <view class="item-right-line">
              <text class="item-title">{{ item.odName }}</text>
            </view>
            <view class="item-right-line induce">
              <text class="rate-text1">商品数量:</text>
              <text class="rate-text2">{{ item.odCount }}</text>
            </view>
            <view class="item-right-line induce">
              <text class="rate-text1">单价:</text>
              <text class="rate-text2 order-price">¥{{ item.odPrice }}</text>
            </view>
            <view class="item-right-line induce">
              <text class="rate-text1">服务次数: 1</text>
            </view>
          </view>
        </view>
        <view class="realPrice">
          <text class="realPrice-content">实付款：¥{{ item.odPrice }}</text>
        </view>

        <view class="line"></view>

        <view class="item-btom" v-if="item.odStatus == 1">
          <view @tap="cancelClick(item)">
            <view class="item-btom-btn">取消</view>
          </view>
          <view @tap="payClick(item)">
            <view class="item-btom-btn boderLight">支付</view>
          </view>
        </view>
        <view class="item-btom" v-if="item.odStatus == 2">
          <view class="item-btom-btn boderLight" @tap="goOrderDetail(item)">订单详情</view>
          <view class="item-btom-btn boderLight" @tap="goOrderDetail(item)">预约</view>
        </view>

        <view class="item-btom" v-if="item.odStatus == 3">
          <view class="item-btom-btn" @tap="goOrderDetail(item)">评价</view>
        </view>

        <view class="item-btom" v-if="item.odStatus == 4">
          <view class="item-btom-btn" @tap="goOrderDetail(item)">删除订单</view>
          <view class="item-btom-btn boderLight" @tap="goOrderDetail(item)">订单详情</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

withDefaults(
  defineProps<{
    dataList: Array<Record<string, any>>
    swiperTabList: Array<Record<string, any>>
  }>(),
  {
    dataList: () => [],
    swiperTabList: () => [],
  },
)
const tabsIndex = ref(0)
const getStatusClass = (status: any) => {
  return {
    'status-red': status == 1,
    'status-2': status == 2,
    'status-green': status == 3,
    'status-brow': status == 4,
  }
}
const goOrderDetail = (e: {}) => {
  console.log('goOrderDetail')
  uni.navigateTo({ url: '/subPackages/orderDetail/index' })
}

const cancelClick = (e: {}) => {}
const payClick = (e: {}) => {}
</script>

<style lang="scss" scoped>
.list-tab {
  .item-main {
    width: 93%;
    margin: 0 auto;
    background-color: white;

    .item-list-box {
      background-color: #ffffff;
      border-radius: 15upx;
      box-shadow: 0 0upx 6upx 0upx rgba(0, 0, 150, 0.2);
      margin-bottom: 20upx;
      .item-top {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        font-size: 28rpx;

        .pay-type {
          font-weight: bold;
        }
        .status-red {
          color: #ff5500;
        }
        .status-2 {
          color: #4891d9;
        }
        .status-green {
          color: #00d500;
        }
        .status-brow {
          color: #c38f90;
        }
      }

      .line {
        position: relative;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        /* 线条长度 */
        width: 96%;
        height: 0rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        /* 线条粗细 */
        border: 1rpx dashed #e9e6e4;
      }
      .item-content {
        display: flex;
        justify-content: center;
        // align-items: center;
        padding: 10upx 20upx;
        .item-left image {
          width: 200upx;
          height: 200upx;
        }

        .item-right {
          flex: 1;
          margin-left: 20upx;

          .item-right-line {
            width: 100%;
            height: 50rpx;
            .item-title {
              display: -webkit-box;
              font-size: 32upx;
              padding-left: 20rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 200px;
              /* 将对象作为弹性伸缩盒子模型显示 */
              display: -webkit-box;
              /* 限制在一个块元素显示的文本的行数 */
              /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
              -webkit-line-clamp: 1;
              /* 设置或检索伸缩盒对象的子元素的排列方式 */
              -webkit-box-orient: vertical;
            }
          }

          .induce {
            display: flex;
            .rate-text1 {
              font-size: 26rpx;
              color: #817d7d;
            }
            .rate-text2 {
              margin-left: 20rpx;
              font-size: 26rpx;
              color: #b9b9b9;
            }
          }
        }
      }
      .realPrice {
        display: flex;
        justify-content: end;
        padding-bottom: 20upx;
        .realPrice-content {
          font-size: 32upx;
          padding-right: 20upx;
          // color: #fe2c55;
        }
      }
    }
  }
}

.item-btom {
  display: flex;
  justify-content: flex-end;
  padding: 20upx 10upx;
  font-size: 28upx;

  .item-btom-btn {
    padding: 6upx 40upx;
    border: 2upx solid #d2d3d4;
    border-radius: 40upx;
    margin-right: 20upx;
    align-items: center;
    color: #d2d3d4;
  }
  .boderLight {
    border: 1px solid #fe2c55;
    color: #fe2c55;
  }
}
</style>
